<template>
<div  style="height:890px;padding-top:50px;">

	<vue2-org-tree
	  :data="data"
	  :horizontal="horizontal"
	  :collapsable="collapsable"
	  :render-content="renderContent"
	  @on-expand="onExpand"
	  @on-node-click="onNodeClick"
	></vue2-org-tree>

 
	<div v-show="modelShow" class="ov1" :style="{left : offsetwidth - 458 + 'px'}">
		<el-row class="mt20">
	        <el-radio-group v-model="activeName2" size="mini" class="ml10">
	            <el-radio-button label="info">详细信息</el-radio-button>
	            <!-- <el-radio-button label="question">问题线索</el-radio-button> -->
	            <el-radio-button label="user">网格员</el-radio-button>
	            <!-- <el-radio-button label="company">企业单位</el-radio-button> -->
	        
	            <el-radio-button label="pwdw">排污单位</el-radio-button>


	            <el-radio-button label="hlxx">河流信息</el-radio-button>
	            <el-radio-button label="cydw">成员单位</el-radio-button>

	        </el-radio-group>
	    </el-row>

	    <el-container class="mt10">
	        <el-main style="padding:10px;">
	            <info v-if="activeName2 == 'info'"
	                  :gridid="grideData.id"
	            ></info>

	            <question v-if="activeName2 == 'question'"
	                      :gridid="grideData.id"
	            ></question>

	            <user v-if="activeName2 == 'user'"
	                  :gridid="grideData.id"
	            ></user>

	            <company v-if="activeName2 == 'company'"
	                     :gridid="grideData.id"
	            ></company>

	            <pwdw v-if="activeName2 == 'pwdw'"
	                :gridid="grideData.id"></pwdw>


	            <hlxx v-if="activeName2 == 'hlxx'"
	                :gridid="grideData.id"></hlxx>

	            <cydw v-if="activeName2 == 'cydw'"
	                :gridid="grideData.id"></cydw>
	        </el-main>
	    </el-container>

	</div>

<div class="b12" v-if="grideData.id" v-show="modelShow"
:style="{left : offsetwidth - 477 + 'px'}"
@click="changeDlg"
>
	<template >
		<i class="el-icon-arrow-left"></i>
	</template>
</div>


<div class="b13" v-if="grideData.id" v-show="!modelShow"
:style="{left : offsetwidth - 47 + 'px'}"
@click="changeDlg"
>
	<template >
		<i class="el-icon-arrow-right"></i>
	</template>
</div>


</div>
</template>

<script>

import Vue2OrgTree from 'vue2-org-tree'
import Gride from './components/grid_1.vue'

	import question from './components/question_1'
	import user from './components/user_1'
	import company from './components/company_1'
	import info from './components/info_1'

	import pwdw from './components/pwdw_1'
	import hlxx from './components/hlxx_1'
	import cydw from './components/cydw_1'

export default {
	
	name : 'overview111',
	
	data () {
		return {
		  	data : {},
		  	horizontal: false,
			collapsable: false,
			expandAll: true,

			grideData : {},
			modelShow : false,

			activeName2: 'info',

			offsetwidth:document.documentElement.clientWidth
		}
	},

	props : {

	},

	components : {
		Vue2OrgTree,
		Gride,
		question,
		user,
		company,
		info,
		pwdw,
		hlxx,
		cydw,
	},

	computed : {

	},

	methods : {
		init () {

			this.$http({
				fun: 'overviewList',
				cb: res => {
					console.log('overviewList');
					console.log(res);
					const result = this.$util.transData(res, 'id', 'parent_id', 'children');
					console.log('组装后的数据', result);
					const result1 = this.$util.transTreeData(result[0], 1, 4);
					this.data = result1;


					// document.getElementById('ddd3').scrollLeft=500;
				}
			});

		},

		renderContent (h, data) {
			return h('div', 
            {
                style: {
                    display: 'inline-block',
                    width:'210px',
                    fontSize : '14px',
                    cursor : 'pointer',
                },
                class : [ 'g' + data.type]
            }, [

            	h('div', {
            		// style : {
            		// 	paddingTop : '10px',
            		// 	paddingBottom : '10px',
            		// },
            		class : [ 'xx0', 'title']
            	}, data.company_name ),

            	h('div', {
            		style : {
            			paddingTop : '10px',
            		},
            		class : ['fl', 'xx0', 'content'],
            	}, [
            		h('div', {
	            		class : ['fl', 'xx1'],
	            	}, '网格长：'),
	            	h('div', {
	            		class : ['fl', 'xx2'],
	            	}, data.name == undefined ? '' : data.name),

            	]),

            	h('div', {
            		class : ['fl', 'xx0', 'content'],
            	}, [
            		h('div', {
	            		class : ['fl', 'xx1'],
	            	}, '联系电话：'),
	            	h('div', {
	            		class : ['fl', 'xx2'],
	            	}, data.mobile == undefined ? '' : data.mobile),

            	]),

            	h('div', {
            		class : ['fl', 'xx0', 'content'],
            	}, [
            		h('div', {
	            		class : ['fl', 'xx1'],
	            	}, '排污单位：'),
	            	h('div', {
	            		class : ['fl', 'xx2'],
	            	}, data.qy_num + ''),

            	]),

            	h('div', {
            		class : ['fl', 'xx0', 'content'],
            	}, [
            		h('div', {
	            		class : ['fl', 'xx1'],
	            	}, '网格员：'),
	            	h('div', {
	            		class : ['fl', 'xx2'],
	            	}, data.wgy_num + ''),

            	]),

            	h('div', {
            		style : {
            			paddingBottom : '10px',
            		},
            		class : ['fl', 'xx0', 'content'],
            	}, [
            		h('div', {
	            		class : ['fl', 'xx1'],
	            	}, '下级网格：'),
	            	h('div', {
	            		class : ['fl', 'xx2'],
	            	}, data.xjwg_num + ''),

            	]),

            ]);

			// if(data.children1.length > 0){
			// 	if(data.type == '1'){
			// 		data.children = data.children1;
			// 	}else if(data.type == '2'){
			// 		data.children = [data.children1[0]];

			// 	}
			// }
			

			//return data.company_name;// + (data.name ? data.name : '');
		},

		onExpand (data) {
			if ('expand' in data) {
				data.expand = !data.expand
				if (!data.expand && data.children) {
					this.collapse(data.children)
				}
			} else {
				this.$set(data, 'expand', true)
			}
		},

		onNodeClick (e, data) {
			console.log(data);
			this.grideData = data;
			this.modelShow = true;
			// console.log('onNodeClick');
			// console.log(data);
			// this.$emit('showgrid', data);
			// this.current = data;

			// this.init();
		},

		// grideClose () {
		// 	this.modelShow = false
		// },


		changeDlg () {
			this.modelShow = !this.modelShow;
		},

	},

	watch : {
	    
	},

	mounted () {
		this.init();
	},

}
</script>

<style>
.xx0 {
	width: 180px;
	padding-right: 15px;
	/*margin-right: 10px;*/
	padding:3px 15px;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}
.xx1 {
	width: 80px;
	text-align: right;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}

.xx2 {
	width: 90px;
	text-align: left;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}

.g1 .title {
	background:rgba(107,237,147,0.7);
	border-radius:2px;
	padding-top: 10px;
	padding-bottom: 10px;
	color : #fff;
}

.g1 .content {
	background:rgba(107,237,147,0.5);
}

.g2 .title {
	background:rgba(38,203,186,0.7);
	border-radius:2px;
	padding-top: 10px;
	padding-bottom: 10px;
	color : #fff;
}

.g2 .content {
	background:rgba(38,203,186,0.5);
}


.g3 .title {
	background:rgba(175,183,248,0.7);
	/*background-color: #B0B6F4;*/
	/*opacity: 0.7;*/
	border-radius:2px;
	padding-top: 10px;
	padding-bottom: 10px;
	color : #fff;
}

.g3 .content {
	background:rgba(175,183,248,0.5);
	/*background-color: #AFB7F8;*/
	/*opacity: 0.5*/
}

.g4 .title {
	background:rgba(35,158,233,0.7);
	border-radius:2px;
	padding-top: 10px;
	padding-bottom: 10px;
	color : #fff;
}

.g4 .content {
	background:rgba(35,158,233,0.5);
}


.ov1 {
	width: 410px;
	height: 530px;
	padding-left: 10px;
	padding-right: 10px;
	color: #fff;
    /*background: rgba(19,90,108,0.9);*/
    background: rgba(8,55,73,0.95);
	position: absolute;
	top: 170px;
}


.b12, .b13 {
	position: absolute;
	top : 400px;
	width: 20px;
	height: 90px;
	background-image: url('../../assets/edge.png');
	color: #fff;
	text-align: center;
	padding-top: 72px;
	cursor: pointer;
	-moz-transform:scaleX(-1);
    -webkit-transform:scaleX(-1);
    -o-transform:scaleX(-1);
    transform:scaleX(-1);
}

/*.a12 {
	left: 796px;
}

.a13 {
	left: 34px;
}*/

</style>
